<template>
  <div class="w-[1200px] mx-auto">
    <div class="w-full h-24 mt-5 px-12">
      <span class="text-3xl font-bold mt-8 inline-block">收藏</span>
      <div class="float-right mt-8 bg-rose-500">
        <input class="w-80 h-10 border-2 bg-white border-solid border-rose-500 p-2" type="text" v-model="searchContent">
        <button class="w-24 h-10 bg-rose-500 text-white" @click="getData">搜索</button>
      </div>
    </div>
    <table class="text-center text-base px-10">
      <thead class="h-12">
        <tr>
          <th>图片</th>
          <th>名称</th>
          <th>分类</th>
          <th>金额</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b-2 h-36 hover:bg-rose-50" v-for="(item, index) in productInfoData" :key="item">
          <td class="w-40"><img class="w-32 h-32 mx-4" :src="`http://127.0.0.1:8081${item.productImage}`">
          </td>
          <td class="w-[450px]">{{ item.productName }}</td>
          <td class="w-48">{{ item.cateName }}</td>
          <td class="w-48 font-bold">￥{{ item.sellPrice }}</td>
          <td class="w-48">
            <button class="w-24 h-10 border-2 border-solid border-zinc-200 hover:border-rose-300"
              @click.stop="deleteCollect(item.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      productInfoData: [],
      searchContent: '',
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      axios( {
        url: 'http://127.0.0.1:8081/api/selectCollectByUserName',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "userToken" ),
          userName: window.localStorage.getItem( "userName" ),
          productName: this.searchContent,
        }
      } ).then( res => {
        if ( res.data.success === false ) {        // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "userToken" )     // 删除卡片，跳转到登录页面
          this.$router.push( { path: '/login' } )
        } else {
          this.productInfoData = res.data.data.productInfoList
        }
      } )
    },
    // 删除收藏
    deleteCollect( id ) {
      axios( {
        url: 'http://127.0.0.1:8081/api/deleteCollect',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "userToken" ),
          id: id,
        }
      } ).then( res => {
        if ( res.data.success === false ) {        // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "userToken" )     // 删除卡片，跳转到登录页面
          this.$router.push( { path: '/login' } )
        } else {
          this.$message.success( res.data.message )
          this.getData()
        }
      } )
    }

  }

}
</script>

<style scoped ></style>